<template>
  <div class="user-center">
    <div class="header-content">
      <!-- 头像 -->
      <div class="avatar">
        <van-image round width="80px" height="80px" src="https://wx.qlogo.cn/mmhead/ver_1/Y1eic2n60qZDduN24PgGlLPeaJjru91MN4mWVz4O6XpOVGhYZY7iaLb4cm5sG7v4yp2UPfYKQETZ6cvlxGV6b8piac5ibhEbCrQbzN1xJIibWRxgub5UMiclTJOyx7wKtx7exV/0"/>
      </div>
      <!-- 用户信息 -->
      <div class="user-info">
        <div class="user-name">用户名</div>
        <div class="user-family">家庭</div>
      </div>
      <!-- 退出登录 右上角 -->
      <div class="logout">
        <van-button round :icon="IconLogout" @click="router.push('/auth/logout')"></van-button>
      </div>
    </div>
    <div class="content">
      <van-cell title="药品管理" is-link to="/medicine" />
      <van-cell title="成员管理" is-link to="/member" />
      <van-cell title="通知记录" is-link to="/notice" />
    </div>
    <div class="content-no-family">
      <!-- <van-button icon="add" type="primary">加入家庭</van-button> -->
      <van-button icon="add" @click="addFamily">创建家庭</van-button>
    </div>
  </div>
  <!-- 创建家庭 -->
  <van-popup v-model:show="showAddFamily" closeable position="bottom" :style="{ height: '50%' }">
    <div class="createFamily">
      <van-cell title="创建家庭" />
      <van-field v-model="addFamilyData.name" label="家庭名" placeholder="请输入家庭名" />
      <van-button type="primary" block style="margin: 40px auto; width: 200px; height: 30px;" @click="addFamilyConfirm">确认添加</van-button>
    </div>
  </van-popup>
  <!-- 加入家庭 -->
</template>

<script setup>
import IconLogout from '@/assets/logout.svg';
import { ref, h } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const userInfo = ref({
  name: '用户名',
  family: '家庭'
})

const showAddFamily = ref(false)
const addFamily = () => {
  showAddFamily.value = true;
  addFamilyData.value.name = userInfo.value.name + ' 的家庭'
}
const addFamilyData = ref({
  name: ''
})
const addFamilyConfirm = () => {
  showAddFamily.value = false
  console.log(addFamilyData.value.name)
  // TODO: 创建家庭
}

</script>

<style scoped>
.user-center {
  font-size: 14px;
}
.header-content {
  display: flex;
  justify-content: left;
  align-items: center;
  height:90px;
  padding: 20px;
  background-color: #EBEEF5;
}
.user-info {
  margin-left: 20px;
}
.user-info .user-name {
  font-size: 25px;
  font-weight: bold;
}
.user-info .user-family {
  margin-top: 10px;
  color: #999;
}
.logout {
  position: absolute;
  right: 20px;
  top: 20px;
}
.content {
  font-size: 20px;
}
.content-item {
  padding: 16px 20px;
  border-bottom: 1px solid #EBEEF5;
  position: relative;
}
.content-item:first-child {
  border-top: 1px solid #EBEEF5;
}
.content-item span {
  position: absolute;
  right: 20px;
}
.content-item:hover {
  background-color: #F5F7FA;
  cursor: pointer;
}
.content-no-family {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
.content-no-family .van-button {
  margin: 10px;
}
</style>